<template>
	<div class="allcontent">
		<div class="search">
			<el-form @submit.native.prevent :model="searchParam" ref="queryFormRef">
				<el-row gutter="10">
					<el-col span="8">
						<el-form-item prop="userName">
							<el-input  @keyup.enter.native="search" placeholder="请输入账号模糊搜索" autofocus v-model="searchParam.userName"></el-input>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-form-item prop="phone">
							<el-input  @keyup.enter.native="search" placeholder="请输入手机号模糊搜索"  v-model="searchParam.phone"></el-input>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-button type="primary" @click="search">搜索</el-button>
					</el-col>
					<el-col  span="8">
						<el-button type="info" @click="reset(queryFormRef)">重置</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="el-table">
			<el-table :data="tableData" ref="multipleTable" style="width: 100%;" v-loading="loading" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
			    <el-table-column prop="userName" label="账号" width="180" />
			    <el-table-column prop="nickName" label="昵称" width="180" />
			    <el-table-column prop="email" label="邮箱" />
				<el-table-column prop="phone" label="手机号" />
				<el-table-column prop="status" label="状态">
					<template  #default="scope">
						<el-tag v-if="scope.row.status == 1">正常</el-tag>
						<el-tag type="danger" v-else-if="scope.row.status == 0">禁用</el-tag>
					</template>
				</el-table-column>	
			</el-table>
		</div>
		<div class="el-pager">
		   <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total" 
		   :page-sizes="[10,20,30,40,50]" :pager-count="11"
		   size="small"  background  class="mt-4" :current-page="currentPage" 
		   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		</div>
		<div class="submit"  v-if="userStore.hasPermission('system:role:assignUsers')" >
			<el-button  style="border-color: white;" type="primary" @click="onSubmit()">保存</el-button>
			<el-button style="color: darkgray;"  @click="resetForm()" >重置</el-button>
			<el-button type="info"  @click="close" >取消</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {ref,reactive,onMounted,watchEffect} from 'vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import {ElMessage} from 'element-plus'
	import {unAssignUserPage} from '@/api/user.ts'
	import {assignUsers} from '@/api/role.ts'
	import {useUserStore} from '@/stores/user.ts'
	const userStore = useUserStore()
	
	const emit = defineEmits(['closeAssignUserForm','success'])
	const props = defineProps(['roleId'])
	const roleId = props.roleId
	
	const confirmEvent = (id:number) => {
	  console.log('confirm!'+id)
	}
	const cancelEvent = () => {
	  console.log('cancel!')
	}
	const selections = ref([])
	const handleSelectionChange=(val)=>{
		selections.value=val;
	}
	
	const multipleTable=ref()
	const resetForm = () => {
		tableData.value.forEach(row => {
			// 使用 toggleRowSelection 方法取消选择每一行
			multipleTable.value.toggleRowSelection(row, false);
		});
	}
	const searchParam =reactive({
		userName:null,
		phone:null,
		page:1,
		limit:10,
		roleId:roleId
	})
	const search=()=>{
		loadData();
	}
	const queryFormRef=ref<FormInstance>();
	const reset = (formEl: FormInstance | undefined) => {
		  if (!formEl) return
		  formEl.resetFields()
		  loadData();
	}
	
	
	onMounted(()=>{
		loadData();
	})
	
	
	const tableData = ref([]);
	const total=ref(0);
	const loading=ref(false)
	
	const loadData=()=>{
		loading.value=true;
		unAssignUserPage(searchParam).then((res)=>{
			if(res.code == 200){
				tableData.value=res.data.list;
				total.value=res.data.total
			}
			loading.value=false;
		})
	}
	const currentPage = ref(1)
	const handleSizeChange = (val: number) => {
	  console.log(`${val} items per page`)
	  searchParam.limit= val;
	  loadData();
	}
	const handleCurrentChange = (val: number) => {
	  console.log(`current page: ${val}`)
	  currentPage.value= val;
	  searchParam.page= val;
	  loadData();
	}
	const onSubmit = async () => {
		if(selections.value.length == 0){
			ElMessage({
			  type: 'warning',
			  message: '至少选择一项分配',
			})
			return;
		}
		const ids=ref([])
		selections.value.forEach((item)=>{
			ids.value.push(item.id)
		})
		const form=ref({
			id:roleId,
			userIds:ids
		})
		const {code}=await assignUsers(form.value);
		if(code === 200){
			ElMessage({
			  type: 'success',
			  message: '分配成功',
			})
			selections.value=[]
			loadData();
			emit('success')
		}
	}
	
	const close = ()=>{
		selections.value=[]
		loadData();
		emit('closeAssignUserForm')
	}
</script>

<style scoped>
	.search{
		margin-bottom: 10px;
	}
	.el-pager{
		justify-content: right;
		margin-top:15px;
	}
	.allcontent{
		height: 65vh;
		position:relative
	}
	.el-table{
		max-height:70%;
		overflow: auto;
	}
	.el-table::-webkit-scrollbar{
		display: none;
	}
	.submit{
		text-align: right;
		position: absolute;
		bottom:0;
		right:0;
	}
</style>